<template>
  <div tabindex='1' @focus="divFocus" @blur="divBlur">
    <input tabindex='2' :placeholder="placeholder" :type="type" :class="{ 'ifSelect': ifSelect }"
           :style="{ 'width': width }" v-model="value" autocomplete @keyup="toParent" @focus="inputSelect"
           @blur="inputUnselect">
    <img class="delete cp" src="@/assets/Login/images/delete.png" alt="" @click="deleteValue" v-show="ifDelete">
    <span :class="{'getCode': true, 'na': !this.codeStatus, 'cp': this.codeStatus, 'couldGetCode': this.codeStatus}"
          v-if="ifGetCode" @click="getCode">{{ codeText }}</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      // 输入框是否为输入状态
      ifSelect: '',
      // 失焦是否展示删除
      ifShowDelete: false
    }
  },
  computed: {
    // 删除按钮是否出现
    ifDelete () {
      return this.value && this.ifShowDelete && this.clearable
    },
    // 获取验证码文本
    codeText () {
      return this.$store.state.common.countDownText
    }
  },
  props: {
    // input宽度
    width: {
      default: '400px',
      type: String
    },
    // input子传父函数名
    fnName: {
      type: String
    },
    // input类型
    type: {
      default: 'text',
      type: String
    },
    // placeholder文字
    placeholder: {
      type: String
    },
    // 是否需要删除功能
    clearable: {
      type: Boolean,
      default: true
    },
    // 是否需要获取验证码功能
    ifGetCode: {
      type: Boolean,
      default: false
    },
    // 验证码状态联动手机号状态
    codeStatus: {
      type: Boolean
    }
  },
  methods: {
    // 子传父
    toParent () {
      this.$emit(this.fnName, this.value)
    },
    // 输入聚焦
    inputSelect () {
      this.ifSelect = true
      this.ifShowDelete = true
    },
    // 输入框失焦
    inputUnselect () {
      this.ifSelect = false
      this.ifShowDelete = false
    },
    // 删除内容
    deleteValue () {
      this.value = ''
    },
    // 外层盒子聚焦
    divFocus () {
      this.ifShowDelete = true
      this.ifSelect = true
    },
    // 外层盒子失焦
    divBlur () {
      this.ifSelect = false
      this.ifShowDelete = false
    },
    // 获取验证码
    getCode () {
      if (this.codeStatus) {
        this.$emit('getPhoneCode')
      }
    }
  }
}
</script>

<style scoped lang="scss">
div {
  position: relative;
  margin-bottom: 24PX;
  outline: 0;
  width: 400PX;

  input {
    position: relative;
    border: none;
    border-bottom-width: 1px;
    border-bottom-color: #EBEDF3;
    border-bottom-style: solid;
    height: 56PX;
    line-height: 56PX;
    font-size: 16PX;
    z-index: 9;
  }

  .ifSelect {
    border-bottom-color: #304EEC;
  }

  .delete {
    position: absolute;
    width: 20PX;
    height: 20PX;
    top: 50%;
    transform: translateY(-50%);
    left: 372PX;
    z-index: 99;
  }

  .getCode {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8PX;
    z-index: 10;
    font-size: 16PX;
    color: #6b7c9e;
  }

  .couldGetCode {
    color: #435EEA;
  }
}
</style>
